<template>
  <div class="parallel-end-node">
    <el-form label-position="top" :rules="rules" label-width="80px" :model="formData" ref='nodeForm'>
      <div class="form-item">
        <el-form-item prop="count" class="num-form-item">
          <span slot="label">以下数量的并行分支完成后，并行结束</span>
          <el-input-number class="input-number" v-model="formData.count" :min='total ? 1 : 0' :max='total' :precision="0" :controls='false'></el-input-number>
        </el-form-item>
        <!-- <div class="item-right-area">/&nbsp; {{total}}</div> -->
      </div>
    </el-form>
  </div>
</template>

<script>
import RuleNodeBaseClass from '@/components/ruleNode/RuleNodeBaseClass'
import { mapState } from 'vuex'

export default {
  name: 'AdvancedLibParallelEndNode',
  mixins: [RuleNodeBaseClass],
  props: {
  },
  data() {
    return {
      formData: {
        count: undefined
      },
      total: 0,
      rules: {
        count: [
          { required: true, message: '请输入', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
  },
  methods: {
    initValue() {
      const initFormData = this.initialForm
      Object.assign(this.formData, initFormData)
      this.changeLine()
    },
    changeLine() {
      const startNode = this.graph.getNodes().filter(item => (item.getData()?.configuration?.order === this.formData.order) && item.getData().additionalInfo.component === 'AdvancedLibParallelStartNode')[0]
      const outPortId = startNode.getPorts().filter(item => item.group === 'out')[0].id
      const edgeSourceList = this.graph.getEdges().filter(item => item.getSource().port - 0 === outPortId - 0)
      this.total = edgeSourceList.length
      if (this.formData.count > this.total) {
        this.formData.count = this.total
      }
    },
    getFormData() {
      this.changeLine()
      return this.formData
    },
    validateForm() {
      let isValid
      this.$refs.nodeForm.validate(valid => { isValid = valid })
      return isValid
    }
  },
  computed: {
    ...mapState({
      selectedItem: state => state.graph.selectedItem,
      graph: state => state.graph.graph
    })
  }
}
</script>
<style lang="scss">
.parallel-end-node{
  .form-item{
    display: flex;
    align-items: flex-end;
    .num-form-item{
      flex: 1 0 auto;
      .tips{
        color: #C0C4CC;
      }
    }
    .item-right-area{
      width: 40px;
      margin-bottom: 16px;
      line-height: 32px;
      padding-left: 10px;
    }
  }
  .input-number{
    width: 100%;
    .el-input__inner{
      text-align: left;
    }
  }
}
</style>
